<template>
  <div class="contracts-page">
    <el-container>
      <el-header class="page-header">
        <h2>我的合同</h2>
        <p>管理您的租赁合同</p>
      </el-header>
      
      <el-main>
        <el-card class="coming-soon-card">
          <div class="coming-soon">
            <el-icon size="64" color="#409eff"><Document /></el-icon>
            <h3>合同管理功能</h3>
            <p>该功能正在开发中，敬请期待...</p>
            <el-button type="primary" @click="$router.push('/properties')">
              浏览房源
            </el-button>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 合同管理功能占位页面
</script>

<style scoped>
.contracts-page {
  min-height: 100vh;
  background: #f6f8fb;
}

.page-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 24px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #333;
}

.page-header p {
  margin: 0;
  color: #666;
}

.coming-soon-card {
  max-width: 600px;
  margin: 40px auto;
}

.coming-soon {
  text-align: center;
  padding: 40px 20px;
}

.coming-soon h3 {
  margin: 16px 0 8px 0;
  color: #333;
}

.coming-soon p {
  margin: 0 0 24px 0;
  color: #666;
}
</style>
